<!DOCTYPE html>
<html>
<head>
    <title>跨域</title>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(function(){
            $("#get").click(function () {
                $.ajax({
                    type: 'get',
                    url: "http://localhost:8080/cdr/testCdr",
                    contentType: "application/json; charset=utf-8",
                    dataType: "jsonp", //指定服务器返回的数据类型
                    data:{
                        "username": "TEC-9",
                        "password": "wodemima"
                    },
                    success : function(data,status){
                        console.log("数据: \n" + JSON.stringify(data) + "\n状态: " + status);
                    }
                });
            });

            $("#post").click(function () {
                $.ajax({
                    type: 'POST',
                    url: "http://localhost:8080/cdr/testCdr",
                    contentType: "application/x-www-form-urlencoded; charset=utf-8",
                    dataType: "jsonp", //指定服务器返回的数据类型
                    data:{
                        "username": "TEC-9",
                        "password": "wodemima"
                    },
                    success : function(data,status){
                        console.log("数据: \n" + JSON.stringify(data) + "\n状态: " + status);
                    }
                });
            });

            $("#testJsonp").click(function () {
                $.ajax({
                    type: 'get',
                    url: "http://localhost:8080/cdr/testJsonp",
                    contentType: "application/json; charset=utf-8",
                    dataType: "jsonp", //指定服务器返回的数据类型
                    jsonpCallback: "printResult",  //指定回调函数名称
                    data:{
                        "username": "TEC-9",
                        "password": "wodemima"
                    },
                    success : function(data,status){
                        // console.log("数据: \n" + JSON.stringify(data) + "\n状态: " + status);
                        console.log("success")
                    }
                });
            });
        });

        function printResult(result) {
            console.log("数据: \n" + JSON.stringify(result) + "\n状态: " + status);
        }

    </script>
</head>
<body>
<h1></h1>
<div>
    <table>
        <thead>
        <tr>
            <td>请求地址</td>
            <td>方式</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td><button id="get">get跨域</button></td>
            <td>get</td>
        </tr>
        <tr>
            <td><button id="post">post跨域</button></td>
            <td>post</td>
        </tr>
        <tr>
            <td><button id="testJsonp">jsonp跨域</button></td>
            <td>get</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>